<template>
    <div id="orderapp">
        <h2>
            <i class="el-icon-arrow-left  imgicon" @click="back"></i>
            {{ arr.orderStatus | f1 }}
        </h2>
        <div class="content ">

            <div v-if="arr.orderStatus == 1" class="title  oh ">
                <p>核销码：{{ arr.verification }}</p>
                <p><qrCode :code="qrcode" class="mb40"></qrCode></p>
            </div>
            <div class="top">
                <h3>订单信息 <span> {{ arr.orderStatus | f2 }}</span></h3>
                <p>订单号：{{ arr.orderCode }} </p>
                <ul>
                    <li>服务项目：{{ arr.serviceItem }}</li>
                    <li>服务门店：{{ arr.businessName }} <img src="../../../../assets/img/wash-car-img/plane.png" @click="toNavi">
                    </li>
                    <li>下单时间：{{ arr.createdDate |timeFormate}}</li>
                    <li>预约时间：{{ arr.bookingTime |timeFormate}}</li>
                    <li>车辆：奔驰FWE4/豫A98FHJ</li>
                    <li>备注：{{ arr.note }}</li>
                </ul>
            </div>
            <div class="buttom">
                <h3 class="pr30 pl30">订单详情</h3>
                <div class="order ">
                    <p>车辆清洗 <span>￥ 199</span></p>
                    <p>车辆附加费用<span>￥ 199</span></p>
                </div>
                <div class="order">
                    <p>原价 <span>￥{{ arr.originPrice }}</span></p>
                    <p>店家优惠 <span style="color:red">-￥0</span></p>
                    <p>优惠<span style="color:red">-￥{{ arr.discount * -1 }}</span></p>
                    <p class="hr1">支付金额<span class="fb green">￥{{ arr.currentPrice }}</span></p>
                </div>
            </div>

            <div class="result" v-if="arr.orderStatus == 4">
                <h3>评价结果</h3>
                <p>评价时间：2000-01-05 15:32</p>
                <p class="flex aic"><span>评价结果：</span>
                <ul class="StarsWrap">
                    <li v-for="(i, index) in list" :key="index">
                        <van-icon name="star" :class="xing > index ? active2 : active" size="30rem" />
                    </li>
                </ul>
                </p>
                <p>评语：23165456158462</p>
            </div>
            <div style="padding-bottom: 300rem;"></div>
        </div>

        <div class="footer">
            <ul>
                <li>
                    <p>
                        <img src="../../../../assets/img/wash-car-img/waiter.png">
                        <span class="f25">联系客服</span>
                    </p>

                </li>
                <li>
                    <button class="btn1" @click="evaluate" v-if="arr.orderStatus == 2">立即评价</button>
                    <button class="btn1" v-if="arr.orderStatus == 0" @click="cancel">取消订单</button>
                    <button class="btn1" v-if="arr.orderStatus == 1" @click="refund">申请退款</button>

                    <button class="btn2" v-if="arr.orderStatus == 0">立即支付</button>
                    <button class="btn2" v-if="arr.orderStatus == 4 || arr.orderStatus == 2 || arr.orderStatus == 3">再来一单</button>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { orderList, comment, afterPay } from '../../../../api/myself';
import qrCode from '../../../../components/qrCode.vue';
export default {
    components:{qrCode},
    data() {
        return {
            active: "active",
            active2: "active2",
            num: 4,
            list: [0, 1, 2, 3, 4],
            xing: 4,
            xx: null,
            arr: [],
            qrcode: null,
        }
    },
    mounted() {
        this.xx = this.$route.query.id
        orderList({ userId: 1 }).then(r => {
            // console.log(r.data)
            let arr1 = r.data.filter(el => { return el.id == this.xx })
            this.arr = arr1[0]
            this.qrcode = this.arr.verification;
            

        })
    },

    methods: {
       
        refund() {
            this.$dialog.confirm({
                message: '退款后将返回到支付账户请确认是否退款',
            })
                .then(() => {
                    // on confirm
                    console.log("确认退款");
                })
                .catch(() => {
                    // on cancel
                    console.log('取消退款');
                })
        },
        cancel() {
            this.$dialog.confirm({
                message: '确认要取消订单吗',
            })
                .then(() => {
                    // on confirm
                    console.log("确认取消订单");
                })
                .catch(() => {
                    // on cancel
                    console.log('取消取消订单');
                })
        },
        toNavi() {
            this.$router.push({ path: '/using/navigation' })
        },
        back() {
            this.$router.back()
        },
        evaluate() {
            this.$router.push("/evaluate")
        },
      
    },
    filters: {
        f1(num) {
            switch (num) {
                case 3: return "已取消订单";
                case 0: return '待支付订单';
                case 1: return '待使用订单';
                case 2: return '待评价订单';
                // case 4 : return '已完成订单';
                case 4: return '已退款订单';
            }
        },
        f2(num) {
            switch (num) {
                case 3: return '已取消';
                case 0: return '待支付';
                case 1: return '待使用';
                case 2: return '待评价';
                // case 4 : return '已完成';
                case 4: return '已退款';
            }
        },
       timeFormate(val){//修改时间格式
            let t= val.substr(0,10);
            let d = new Date(val);
            let res = t+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
            console.log(res);
            return res;
        }
    }
}
</script>
<style  scoped>
.qrcode {
    display: inline-block;
    width: 240rem;
    height: 240rem;
    background-color: #fff;
    padding: 20rem;
    box-sizing: border-box;
}

.active {
    color: gray;
}

.active2 {
    color: #ffc207;
}

.green {
    color: rgb(30, 202, 119);
}

#orderapp {
    background-color: rgb(247, 247, 247);
}

.title {
    text-align: center;
    font-size: 28rem;
    height: 316rem;
    background-color: #fff;
    border-radius: 20rem;
    padding-top: 30rem;
    margin-bottom: 20rem;
}

.title img {
    width: 200rem;
    height: 200rem;
    margin-top: 20rem;
}

h2 {
    text-align: center;
    font-size: 36rem;
    font-weight: normal;
    width: 100%;
    height: 370rem;
    background-color: rgb(46, 128, 249);
    padding-top: 70rem;
    color: white;


}

.imgicon {
    position: absolute;
    left: 30rem;
    top: 80rem;
}

.content {
    width: 710rem;
    margin: -280rem auto;
}

h3 {
    font-size: 36rem;
    font-weight: normal;
    padding: 30rem 0;
    display: flex;
    justify-content: space-between;
}

h3 span {
    font-size: 28rem;
    color: orange;
}

.top {
    font-size: 25rem;
    padding: 20rem 50rem;
    border-radius: 20rem;
    background-color: #fff;
    padding-bottom: 20rem;
}

.top p {
    padding: 30rem 0 10rem;
}

.top ul li {
    padding: 10rem 0;
}

.top ul li img {
    width: 30rem;
    height: 30rem;
    margin-left: 20rem;
    vertical-align: middle;
}

.buttom {
    background-color: #fff;
    margin-top: 20rem;

}

.order {
    margin-top: 20rem;
}

.order p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rem 25rem;
    font-size: 20rem;
}

.hr1 {
    border-top: 1px solid #999;
    height: 60rem;
}

.result {
    font-size: 26rem;
    padding: 20rem 30rem;
    background-color: #fff;
    border-radius: 20rem;
}

.result p {
    padding-top: 15rem;
    width: 100%;
}

.StarsWrap {
    width: 70%;
    height: 20rem;
    line-height: 20rem;
    margin: 10rem 0;
}

.StarsWrap li {
    float: left;
    margin-right: 10rem;
}

.footer {
    position: fixed;
    bottom: 0;
    font-size: 20rem;
    width: 100%;
    height: 115rem;
    background-color: #fff;
    box-sizing: border-box;
    line-height: 115rem;
    padding: 0 30rem;
    box-sizing: border-box;
}

.footer ul li img {
    width: 40rem;
    height: 40rem;
    vertical-align: middle;
}

.footer ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

button {
    width: 150rem;
    height: 50rem;
    line-height: 50rem;
    font-size: 22rem;
    border-radius: 20rem;
    border: 0;
}

.btn1 {
    background-color: rgb(191, 191, 191);
}

.btn2 {
    color: white;
    background-color: rgb(48, 131, 251);
    margin-left: 30rem;
    margin-right: 20rem;
}</style>
